<template>
	<view class="user-spread-month-bill">
		<!--  <view class="header row white">
        <view class="header-show column-center">
            <view class="num">{{month}}</view>
            <view class="label sm row" @tap="openPop">月份  <trigonometry color="white" opacity="1"></trigonometry></view>
        </view>
        <view class="header-show column-center">
            <view class="num">{{order}}</view>
            <view class="label sm">成交笔数</view>
        </view>
        <view class="header-show column-center">
            <view>
                <price-format showSubscript :subscriptSize="26" :firstSize="42" :secondSize="42" color="#ffffff" :price="money" />
            </view>
            <view class="label sm">累计预估收益</view>
        </view>
    </view> -->
		<view class="content">
			<view class="order-container">
				<view v-for="(item, index) in orderList" :key="index" class="order-item bg-white mb20">
					<view class="order-header row-between">
						<view class="muted">订单编号:{{item.order_sn}}</view>
						<!-- <view class="white guide-shop-btn row-center">导购订单</view>
						 -->
						<template v-if="item.order_type == 0">
							<view class="order-sign--goods">商城订单</view>
						</template>
						<template v-if="item.order_type == 1">
							<view class="order-sign--lease">租赁订单</view>
						</template>
						<template v-if="item.order_type == 2">
							<view class="order-sign--recycle">回收订单</view>
						</template>
						<template v-if="item.order_type == 3">
							<view class="order-sign--lendlease">换租订单</view>
						</template>
					</view>
					<view class="order-content row">
						<view class="order-goods-img">
							<custom-image :src="item.image" width="100%" height="100%" radius="6px" />
						</view>
						<view class="order-goods-info ml10">
							<!-- 				<view class="name row sm">{{item.goods_name}}</view>
							<view class="pre-income muted">预估收益
								<price-format showSubscript subScriptClass="nr" firstClass="nr" secondClass="nr"
									:color="primaryColor" weight="bold" :price="item.money" />
							</view> -->
							<view class="name row sm">{{item.goods_name}}</view>

							<view>
								<view class="row-between">
									<view class="xs muted">数量:<text class="normal nr ml10">{{item.goods_num}}</text></view>
									<view class="xs">
										<text class="muted mr10">{{ getMoneyLabel(item.order_type) }}:</text>
										<price-format showSubscript :subScriptSize="28" :firstSize="28" :secondSize="28"
											:price="item.pay_price" />
									</view>
								</view>
								<view class="pre-income muted">
									<text class="mr10">预估收益:</text>
									<price-format showSubscript :subScriptSize="28" :firstSize="28" :secondSize="28"
										color="#24A3FF" :price="item.money" />
								</view>
							</view>
						</view>
					</view>
					<view class="order-footer row-between">
						<view class="time muted">{{item.create_time}}</view>
						<view class="static" :style="'color: ' + (item.status == '待返佣' ? '#F95F2F' : '#07CE1B')">
							{{item.status}}
						</view>
					</view>
				</view>
				<loading-footer :status="loadingStatus" slotEmpty>
					<view class="data-null column-center" slot="empty">
						<image class="img-null" src="/static/images/order_null.png"></image>
						<view class="xs muted">暂无账单明细</view>
					</view>
				</loading-footer>
			</view>
		</view>
		<u-select v-model="showPop" :list="months" mode="single-column" @confirm="changeMonths"></u-select>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | LikeShop100%开源免费商用电商系统
	// +----------------------------------------------------------------------
	// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
	// | 开源版本可自由商用，可去除界面版权logo
	// | 商业版本务必购买商业授权，以免引起法律纠纷
	// | 禁止对系统程序代码以任何目的，任何形式的再发布
	// | Gitee下载：https://gitee.com/likemarket/likeshopv2
	// | 访问官网：https://www.likemarket.net
	// | 访问社区：https://home.likemarket.net
	// | 访问手册：http://doc.likemarket.net
	// | 微信公众号：好象科技
	// | 好象科技开发团队 版权所有 拥有最终解释权
	// +----------------------------------------------------------------------
	// | Author: LikeShopTeam
	// +----------------------------------------------------------------------
	import {
		getMonthOrderDetail
	} from "@/api/user";
	import {
		loadingType
	} from '@/utils/type';
	const months = [];

	for (let i = 1; i <= 12; i++) {
		months.push({
			value: i,
			label: i + "月"
		})
	}

	export default {
		data() {
			return {
				loadingStatus: loadingType.LOADING,
				page: 1,
				orderList: [],
				month: 1,
				year: 2010,
				// 累计预估收益
				money: 0,
				// 成交笔数
				order: 0,
				// 选择器月份
				months: months,
				chooseMonth: 1,
				showPop: false
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.year = options.year;
			this.chooseMonth = [Number(options.month)];
			this.month = Number(options.month);
			uni.setNavigationBarTitle({
				title: `${this.month}月度账单详情`
			});
		},


		onShow: function() {
			this.getMonthOrderDetailFun();
		},


		onReachBottom: function() {
			this.getMonthOrderDetailFun();
		},

		methods: {
			// 获取金额标签
			getMoneyLabel(index) {
				switch(index) {
					case 0: return '金额';
					case 1: return '金额';
					case 2: return '质检价';
					case 3: return '金额';
				}
			},
			
			getMonthOrderDetailFun() {
				let {
					page,
					orderList,
					loadingStatus,
					year,
					month
				} = this;
				if (loadingStatus == loadingType.FINISHED) return;
				getMonthOrderDetail({
					page_no: page,
					year: year,
					month: month
				}).then(res => {
					if (res.code == 1) {
						let {
							more,
							list,
							total_money,
							total_order
						} = res.data;
						orderList.push(...list);

						this.orderList = orderList;
						this.page++;
						this.money = total_money;
						this.order = total_order

						if (!more) {
							this.loadingStatus = loadingType.FINISHED;
						}

						if (orderList.length <= 0) {
							this.loadingStatus = loadingType.EMPTY
							return;
						}
					} else {
						this.loadingStatus = loadingType.ERROR
					}
				});
			},

			openPop() {
				this.showPop = true
			},

			closePop() {
				this.showPop = false
			},

			changeMonths(e) {
				const val = e[0].value;
				this.chooseMonth = val
				this.selectMonth()
			},

			cleanStatus() {
				this.loadingStatus = loadingType.LOADING;
				this.page = 1;
				this.orderList = []
			},

			selectMonth(e) {
				const {
					chooseMonth,
					month
				} = this;
				this.month = chooseMonth;
				this.showPop = false
				this.cleanStatus();
				this.getMonthOrderDetailFun();
			}

		}
	};
</script>
<style lang="scss">
	.user-spread-month-bill .header {
		height: 240rpx;
		background-color: $-color-primary;
		padding-top: 60rpx;
	}

	.user-spread-month-bill .header .header-show {
		flex: 1;
		align-self: flex-start;
	}

	.user-spread-month-bill .header .header-show .num {
		font-size: 42rpx;
	}

	.user-spread-month-bill .content {
		padding: 20rpx;
		// margin-top: -60rpx;
	}

	.user-spread-month-bill .content .order-container .order-item {
		border-radius: 14rpx;
	}

	.user-spread-month-bill .content .order-container .order-item .order-header {
		padding: 20rpx 30rpx;
		// border-bottom: $-solid-border;
	}

	.order-sign--goods,
	.order-sign--lease,
	.order-sign--recycle,
	.order-sign--lendlease {
		padding: 4rpx 12rpx;
		border-radius: 2px;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.order-sign--goods {
		background: linear-gradient(to right, #F95F2F, #FF2C3C);
	}

	.order-sign--lease {
		background: linear-gradient(to right, #01D171, #00B260);
	}

	.order-sign--recycle {
		background: linear-gradient(to right, #24A3FF, #3187FD);
	}

	.order-sign--lendlease {
		background: linear-gradient(to right, #01D171, #24A3FF);
	}


	.user-spread-month-bill .content .order-container .order-item .order-header .guide-shop-btn {
		background: linear-gradient(80deg, #F95F2F 0%, #FF2C3C 100%);
		border-radius: 4rpx;
		width: 134rpx;
		height: 42rpx;
	}

	.user-spread-month-bill .content .order-container .order-item .order-content {
		padding: 20rpx 30rpx 20rpx 20rpx;
		// border-bottom: $-solid-border;
		border-bottom: 1px solid #E5E5E5;
		border-top: 1px solid #E5E5E5;
	}

	.user-spread-month-bill .content .order-container .order-item .order-content .order-goods-img {
		width: 140rpx;
		height: 140rpx;
		flex: none;
	}

	.user-spread-month-bill .content .order-container .order-item .order-content .order-goods-info {
		width: 100%;
		text-align: left;
	}

	.user-spread-month-bill .content .order-container .order-item .order-content .order-goods-info .name {
		font-weight: 500;
		line-height: 36rpx;
	}

	.user-spread-month-bill .content .order-container .order-item .order-content .order-goods-info .pre-income {
		line-height: 34rpx;
		margin-top: 8rpx;
	}

	.user-spread-month-bill .content .order-container .order-item .order-footer {
		padding: 20rpx 30rpx 20rpx 20rpx;
	}

	.user-spread-month-bill .content .order-container .order-item .order-footer .static {
		color: #F95F2F;
	}

	.user-spread-month-bill .content .order-container .order-item .order-footer .wait-return {
		color: #F95F2F;
	}

	.user-spread-month-bill .pop-header {
		height: 80rpx;
	}

	.content .order-container .data-null {
		padding-top: 200rpx;
	}
</style>
